<template>
  <div class="dashboard-editor-container-an">
    <el-row style="margin-bottom: 17.7px">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper-an">
          <el-form :inline="true" :label-position="'left'">
            <el-row class="search-title">条件搜索</el-row>
            <el-form-item prop="parkname">
              <el-input v-model="parkNameSearch" style="width: 260px" prefix-icon="el-icon-search" readonly
                        placeholder="车场名称" @click.native="openParkDialog"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-search" type="primary" @click="searchParkRound">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" v-if="echartsFlag">
      <el-col :xs="24" :sm="8" :lg="8">
        <div class="parkMsg">
          <p>车场名称&nbsp;&nbsp;&nbsp;<span>{{momentParkInCars.parkInfo.parkName}}</span></p>
          <p>车场位置&nbsp;&nbsp;&nbsp;<span>{{momentParkInCars.parkInfo.locationText}}</span></p>
          <p>泊位总数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{momentParkInCars.parkInfo.placeNum}}个</span></p>
          <p>泊位平均周转率(最近七天)&nbsp;&nbsp;&nbsp;<span>{{parkTurnoverData}}</span></p>
          <p>泊位平均占用时长(最近七天)&nbsp;&nbsp;&nbsp;<span>{{parkOccupyTime}}小时</span></p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="16" :lg="16">
        <div class="map_box">
         <!-- <div class="bz">
            <el-row>
              <img  width='18px' src='../../assets/map_images/markersidle.png'> 封闭停车场
            </el-row>
            <el-row>
              <img  width='18px' src='../../assets/map_images/markersoffduty.png'> 道路停车场
            </el-row>
          </div>-->
         <baidu-map class="map" :center="{lng: centerLng, lat: centerLat}" :zoom="15">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                         anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <!--&lt;!&ndash;查询的车场&ndash;&gt;-->
            <bm-marker v-if="momentParkInCars.parkInfo.type === 1" :position="{lng: momentParkInCars.parkInfo.parkLng, lat: momentParkInCars.parkInfo.parkLat}"
                       :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: barkerMapImg2, size: {'width':38,'height':50}}">
              <bm-label :content='momentParkInCars.parkInfo.parkName' :labelStyle="{color: '#60BA00', fontSize : '12px',border: '1px solid #60BA00',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
            </bm-marker>
            <bm-marker v-if="momentParkInCars.parkInfo.type === 2" :position="{lng: momentParkInCars.parkInfo.parkLng, lat: momentParkInCars.parkInfo.parkLat}"
                       :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: barkerMapImg, size: {'width':38,'height':50}}">
              <bm-label :content='momentParkInCars.parkInfo.parkName' :labelStyle="{color: '#006AE3', fontSize : '12px',border: '1px solid #006AE3',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
            </bm-marker>
            <!--&lt;!&ndash;周边的车场&ndash;&gt;-->
            <bm-marker v-for="item in momentParkInCars.parkRound" v-if="item.type === 1" :position="{lng: item.parkLng, lat: item.parkLat}"
                       :dragging="true" :icon="{url: barkerMapImg2, size: {'width':38,'height':50}}">
              <bm-label :content='item.parkName' :labelStyle="{color: '#60BA00', fontSize : '12px',border: '1px solid #60BA00',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
            </bm-marker>
            <bm-marker v-for="item in momentParkInCars.parkRound" v-if="item.type === 2" :position="{lng: item.parkLng, lat: item.parkLat}"
                       :dragging="true" :icon="{url: barkerMapImg, size: {'width':38,'height':50}}">
              <bm-label :content='item.parkName' :labelStyle="{color: '#006AE3', fontSize : '12px',border: '1px solid #006AE3',borderRadius:'8px'}" :offset="{width: 0, height: 40}"/>
            </bm-marker>
          </baidu-map>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 17.4px" v-if="echartsFlag">
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper-ans">
          <Placezhouzhuan :dataList="parkOccupyData"></Placezhouzhuan>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper-ans">
          <Parkuse :dataList="parkUsageRangeData"></Parkuse>
        </div>
      </el-col>
    </el-row>
    <all-park-msg :parkVisible.sync="parkVisible" @parkMsg="getParkMsg"></all-park-msg>
  </div>
</template>

<script>
  import Placezhouzhuan from './chart/placezhouzhuan'
  import Parkuse from './chart/parkuse'
  import '../../utils/concrete_jx2'
  import ParkMsgDialog from '../parkDataSearch/parkInfoSearch/parkMsgDialog'
  import AllParkMsg from "./parkAnalvsisChild/allParkMsg";

  export default {
    components: {
      AllParkMsg,
      ParkMsgDialog,
      Parkuse, Placezhouzhuan
    },
    data() {
      return {
        echartsFlag: false,
        parkVisible: false,
        barkerMapImg: '',
        barkerMapImg2: '',
        momentParkInCars: {
          parkInfo: {
            parkName: '',
            locationText: '',
            placeNum: 0
          },
          parkRound: []
        },
        parkNameSearch: '',
        parkOccupyData: [],
        parkUsageRangeData: [],
        parkTurnoverData: 0,
        parkOccupyTime: 0,
        centerLng: 117.536943,
        centerLat: 36.702987
      }
    },
    mounted() {
      this.barkerMapImg = require('../../../src/assets/images/003.png')
      this.barkerMapImg2 = require('../../../src/assets/images/001.png')
    },
    methods: {
      searchKeyParkRound() {
        this.searchParkRound()
      },
      getAroundPark(parkName) {
        concrete_jx2.module('ParkAnalysisService').queryParkRoundInfoByParkName(parkName).then(
          res => {
            console.log('车场分析', res);
            this.momentParkInCars = res
            this.centerLng = this.momentParkInCars.parkInfo.parkLng
            this.centerLat = this.momentParkInCars.parkInfo.parkLat
            this.momentParkInCars.parkRound.splice(0, 1)

            let parNo = this.momentParkInCars.parkInfo.parkNo
            /* 周转率 */
            this.getTurnover(parNo)
            /* 时长 */
            this.getParkOccupyTime(parNo)
            /* 占用率 */
            this.getParkOccupy(parNo)
            /* 使用率 */
            this.getParkUsageRange(parNo)
          }
        )
      },
      searchParkRound() {
        if (this.parkNameSearch === '') {
          this.$message({
            message: '请输入停车场名称',
            type: 'warning'
          })
          return
        }
        this.getAroundPark(this.parkNameSearch)
      },
      getParkOccupy(parkNo) {
        concrete_jx2.module('ParkAnalysisService').queryOccupyRangeByParkNo(parkNo).then(
          res => {
            this.parkOccupyData = res
          }
        )
      },
      getParkUsageRange(parkNo) {
        concrete_jx2.module('ParkAnalysisService').queryUsageRangeByParkNo(parkNo).then(
          res => {
            this.parkUsageRangeData = res
          }
        )
      },
      getTurnover(parkNo) {
        concrete_jx2.module('ParkAnalysisService').queryTurnoverByParkNo(parkNo).then(
          res => {
            this.parkTurnoverData = res
          }
        )
      },
      getParkOccupyTime(parkNo) {
        concrete_jx2.module('ParkAnalysisService').queryPlaceUsedTime(parkNo).then(
          res => {
            this.parkOccupyTime = res
          }
        )
      },
      getParkMsg(val){
        this.parkNameSearch = val.parkName
        this.echartsFlag = true;
        this.getAroundPark(this.parkNameSearch);
      },
      openParkDialog() {
        this.parkVisible = true;
      }
    }
  }
</script>
<style scoped>
  .chart-wrapper-ans{
    background: #1B4685;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px;
    height: 386px;
  }
  .map_box{
    height: 245px;
    padding-top: 5.5px;
    padding-left: 7px;
    padding-right: 9px;
    padding-bottom: 5.5px;
    background: #1B4685;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px 2px 2px 2px;
  }
  .parkMsg{
    background: #1B4685;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px 2px 2px 2px;
    height: 245px;
    padding-top: 21px;
    padding-left: 31px;
  }
  p {
    margin-bottom: 20px;
    font-family: MicrosoftYaHei;
    font-size: 14px;;
    color: #59A2EC;
  }

  span {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #4AD288;
  }

  .dashboard-editor-container-an {
    height: 100vh;
    padding: 15px;
    background-color: #1A4380;
  }

  .chart-wrapper-an {
    background-color: #1B4685;
    padding: 16px 16px 0;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px 2px 2px 2px;
  }

  .map-row {
    width: 100%;
    height: 40vh;
  }

  .map {
    width: 100%;
    height: 234px;
  }
  .bz{
    width: 120px;
    height: 60px;
    position: fixed;
    z-index: 200;
    background: #ffffff;
    font-size: 13px;
  }
</style>
